<template>
	<view class="content">
		<view class="page-header home-header">
			<view class="fixed-layout">
				<!-- 标题栏 -->
				<uni-nav-bar>
					<block slot="left"></block>
					<view>
						<text @click="testReq" class="top-nav-button top-nav-button-selected">首页</text>
					</view>
					<view> 
						<text @click="testReq" class="top-nav-button">去哪儿</text>
					</view>
					<block slot="right"></block>
				</uni-nav-bar>
							
				<!-- 主导航 -->
				<view class="home-sub-nav">
					<view class="nav-content">
						<button class="nav-button selected">大厅</button>
						<button @click="change" class="nav-button">新手入门</button>
						<button class="nav-button">进阶精华</button>
					<!-- 	<button class="nav-button">新手</button>
						<button class="nav-button">精华</button>
						<button class="nav-button">关注</button> -->
					</view>
				</view>
				<!-- 排序标签 -->
<!-- 				<view class="list-sort-bar posts-sort">
					<button class="sort-button selected">最新发帖</button>
					<button class="sort-button">最新评论</button>
				</view> -->
			</view>
		</view>
	<!-- 		<template v-for="(item,index) in shwoData as any" :key="index"> -->
	     <!--   </template> -->
		<!-- 顶部广告 -->
	<!-- 	<view class="top-banner">
			<image @click="testReq" src="../../static/temp-topAd.webp" mode="widthFix"></image>
		</view> -->
		<!-- 帖子列表 -->
		<view class="post-card-list">
			<!-- 帖子 -->
			<view class="post-card" v-for="(item,index) in shwoData as any" :key="index">
				<!-- 贴标签 -->
				<view class="post-tag-list">
					<!-- 此处仅仅是演示，极限情况不会超过4个 -->
					<icon type="" class="imgTag post-tag tag-same-city"></icon>
				</view>
				<!-- 用户信息 -->
						<!-- 视频组件 -->
						<view v-if="item?.msgType === 8">
							<h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
						 	<h-com-conent :userVo="item.cigarUser" :msgVo="item"></h-com-conent>
						 	<h-com-video :videoVo="item.videoMsg"></h-com-video>
							<h-com-bottom></h-com-bottom>
						 </view>
						 <!-- 投票的 -->
						 <view v-else-if="item?.msgType === 0">
							 <h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
							 <h-com-conent :userVo="item.cigarUser" :msgVo="item"></h-com-conent>
							 <h-com-vote :voteVo="voteVo" :userVo="item.cigarUser"></h-com-vote>
							 <h-com-bottom></h-com-bottom>
						 </view>
						 <!-- 雪茄链接,card上面部分 -->
						 <view v-else-if="item?.msgType===2">
							 <h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
							<!-- <h-com-cigar :cardVo="cardVo" :gameVo="gameVo"></h-com-cigar> -->
							 <h-com-cigar :cardVo="item.cigar"></h-com-cigar>
							<h-com-bottom></h-com-bottom>
						 </view>
						 <!-- 文章 （长图）-->
						<view v-else-if="item?.msgType === 1">
							<h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
							 <h-com-conent :userVo="item.cigarUser" :msgVo="item"></h-com-conent>
							 <h-com-title  :pictureVo="item"></h-com-title> 
							 <h-com-bottom></h-com-bottom>
						 </view>
						 <!-- 活动的 -->
						 <view v-else-if="item?.msgType === 4">
							 <h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
							 <h-com-conent :userVo="item.cigarUser" :msgVo="item"></h-com-conent>
							 <h-com-card :cardVo="item.cigar" :gameVo="item.cigarGame"></h-com-card>
							 <h-com-bottom></h-com-bottom>
						 </view>
						 <!-- 生日的 -->
						 <view v-else-if="item?.msgType === 7">
								 <h-com-head :userVo="item.cigarUser" :msgVo="item "></h-com-head>
								<h-com-birthday :userVo="item.cigarUser"></h-com-birthday>
								  <h-com-bottom></h-com-bottom>
						 </view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<!-- <text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 -->
		     <!-- <h-com-post ref="childrenRef" :conent="conent"></h-com-post> -->
					<!-- <image @click="testReq" src="../../static/temp-photo.webp" mode="widthFix" class="full-img"></image>
					<image @click="testReq" src="../../static/temp-photo-02.png" mode="widthFix" class="full-img"></image> -->
				  <!-- 多张图片的位置 -->
			<!--<h-com-picture ref="picture" :picture="picture"></h-com-picture> -->
					<!-- 视频位置 -->
					<!-- <h-com-video></h-com-video> -->
					<!-- 五星 -->
				<!-- 	<h-com-star></h-com-star> -->
					<!-- 文章 -->
			  <!--   <h-com-title></h-com-title> -->
					<!-- 味道标签 -->
					<view class="smell-list">
						<text class="smell-tag">威士忌</text>
						<text class="smell-tag">奶油味</text>
						<text class="smell-tag">花生</text>
						<!-- <text @click="testReq" class="link-text">去补充味道 &gt;&gt;</text> -->
					</view>
					<!-- 嵌入内容 -->
					<!-- 引用卡片 -->
<!-- 					<h-com-card></h-com-card> -->
					<!-- 引用卡-帖子引用 -->
			<!-- 		<h-com-conent></h-com-conent> -->
					<!-- 投票的定位 -->
		<!-- 			<h-com-vote></h-com-vote> -->
				</view>
			    <!-- 定位 -->
				<!-- 	<h-com-location></h-com-location> -->
			<!-- 	<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text> -->
			<!-- 	<view class="post-bottom-bar">
					<button class="post-share-btn" @click="testReq">转发</button>
					<button class="post-comment-btn" @click="testReq">评论</button>
					<button class="post-thumbs-btn" @click="testReq">点赞</button>
				</view> -->
			</view>
		</view>

		<!-- 创建菜单 -->
		<view class="create-menu" id="create-menu">
			<view class="menu-bg" id="menu-bg" @click="ToggleCreateMenu"></view>
			<view class="menu-buttons-group">
			<!-- 主按钮 -->
				<button class="create-btn menu-btn" id="create-menu-btn" @click="ToggleCreateMenu"><span>取消</span><icon type="" class="icon-create-menu"></icon></button>
				<button class="create-btn create-posts"><span>发布帖子</span><icon type="" class="icon-posts"/></button>
				<button class="create-btn create-article"><span>发布文章</span><icon type="" class="icon-article"/></button>
				<button class="create-btn create-bounty"><span>发布悬赏</span><icon type="" class="icon-bounty"/></button>
				<button class="create-btn create-video"><span>发布视频</span><icon type="" class="icon-video"/></button>
				<button class="create-btn create-collect-cigar"><span>收藏雪茄</span><icon type="" class="icon-collect-cigar"/></button>
			</view>
			<!-- 动画开始时阻止点击的层，动画结束时关闭 -->
			<view class="block-touch-layer"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { HTTP_API_URL } from '@/common/consts/Consts';
import { HttpMethod, httpUtil } from '@/common/netWork/httpUtil';
import type {IUserVo,IMsg} from '@/logic/globInterface/dataInterface';
import Tool from '@/common/utils/Tool';
import {onBeforeMount,reactive,ref,watch} from 'vue';;
const userVo:IUserVo = reactive({} as IUserVo);
const msgVo:IMsg=reactive({} as IMsg)
const cardVo=reactive({});
const gameVo=reactive({});
const postionVo=reactive({})
const pictureVo=reactive({})
const videoVo=reactive({})
const voteVo=reactive({})
let shwoData = ref({})
function token (){
	const token=uni.getStorageSync('token')
	console.log('token',token)
}
 function ToggleCreateMenu(event:any){
 	var createMenu = document.getElementById("create-menu")
 	var createMenuBtn = document.getElementById("create-menu-btn")
 	// 关闭菜单
 	if(createMenu?.classList.contains("in")){
 		createMenu.classList.remove("in")
 		setTimeout(()=>{
 			createMenu?.classList.add("out")
 		},10);
 		setTimeout(()=>{
 			createMenu?.classList.remove("out")
 			createMenu?.classList.remove("opened");
 			document.body.classList.remove("lockScroll")
 		},1200)
 		return
 	}
 	// 打开菜单
 	createMenu?.classList.add("in")
 	document.body.classList.add("lockScroll")
 	setTimeout(()=>{
 		createMenu?.classList.add("opened")
 	},1200)
 }
const info=reactive({
	nickName:'未登录',
	picUrl:'../../static/temp-photo.jpg',
	vipLevel:'',
	userLevel:''

})
const getType = (item:any)=>{
	return item || {}
}
 onBeforeMount(async ()=>{
 	const nowDate = new Date().getTime();
 	const msg = await httpUtil.request(HTTP_API_URL.MSG_QUERYAllMSG,HttpMethod.POST,{"size":"10","page":"0","createDate":nowDate})
 	const data=JSON.parse(msg.data)
	shwoData.value = data
	console.log('shwoData',shwoData.value)
 	console.log(data,'666666')
 	let cigarUser = data[0]?.cigarUser || {};
	console.log('userVo',userVo)
 	Tool.buildInitProp(cigarUser,userVo);
	
 	console.log(userVo,'445555')
 	//测试帖子
 	let comment=data[0]
 	Tool.buildInitProp(getType(comment),msgVo);
 	console.log('www',msgVo)
   //card测试
 	let card=data[0].cigar
   Tool.buildInitProp(getType(card),cardVo)
 	//活动测试
 	let game=data[0].cigarGame
 	console.log('hhh',game)
 	Tool.buildInitProp(getType(game),gameVo)
 	//定位测试
 	let postion=data[0]
 	console.log('postion',postion)
 	Tool.buildInitProp(getType(postion),postionVo)
 	//、图片测试
 	let picture=data[0]
 	console.log('uuu',picture)
 	Tool.buildInitProp(getType(picture),pictureVo)
 	//视频测试
 	let videoMsg=data[0].videoMsg
   console.log('rrr', videoMsg)
    Tool.buildInitProp(getType(videoMsg),videoVo)
 //投票
 let post=data[0].voteQuestion
 Tool.buildInitProp(getType(post),voteVo)
 })
 
</script>
